/*首先让body和html都为100%宽高，后边用百分比才好用！！*/
body,
html {
  width: 100%;
  height: 100%;
}
/*设置整个内容的容器跟屏幕大小一样的宽高*/
#content {
  width: 100%;
  height: 100%;
  background: url("/statics/imgs/bg.jpg");
  background-position: 0;
  background-size: 100%;
}
/*大背景图片始终保证跟屏幕一样宽*/
#content_bg {
  width: 100%;
  background-position: 0;
}
/*欢迎文字*/
#content_hy {
  width: 40%;
  position: absolute;
  top: 6%;
  left: 30%;
}
/*个人中心栏的容器*/
#content_ss {
  position: absolute;
  top: 15%;
  width: 100%;
  height: 10%;
}
/*个人中心栏的背景*/
#content_ss_bg {
  width: 96%;
  height: 100%;
  margin-left: 2%;
  border-radius: 5px;
  background-color: #ffffff;
  opacity: 0.7;
}
/*个人中心栏的向右箭头图标*/
#content_ss_tb {
  height: 40%;
  position: absolute;
  top: 27%;
  right: 7%;
}
/*个人中心栏的右侧文字-个人中心*/
#content_ss_text {
  font-size: 16px;
  position: absolute;
  top: 34%;
  right: 16%;
  color: #979797;
}
/*个人中心栏的左侧头像*/
#content_ss_tx {
  height: 70%;
  position: absolute;
  top: 15%;
  left: 5%;
}
/*底部的四个大块内容容器*/
#content_bottom {
  width: 100%;
  height: 70%;
  /*background-color: red;*/
  position: absolute;
  top: 28%;
}
/*四个单个模块*/
.content_bottom_div {
  /*width=(100%-(左右的间隙是2%*2+中间的间隙2%))/2=47%*/
  width: 47%;
  /*height=(100%-(中间的间隙2%))/2=47.5%*/
  height: 49.5%;
  float: left;
  margin-left: 2%;
  margin-bottom: 2%;
  position: relative;
}
/*四个背景*/
.content_bottom_div_bg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  opacity: 0.7;
}
/*四个图标*/
.content_bottom_div_img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  top: 35%;
  left: 25%;
}
/*四个模块的标题*/
.content_bottom_div_tetle {
  position: absolute;
  top: 7%;
  left: 10%;
  font-size: 16px;
  color: #474747;
  font-family: "Microsoft Yahei", "Heiti SC", "Droid Sans", Arial;
}
/*四个模块的英文*/
.content_bottom_div_cn {
  position: absolute;
  top: 18%;
  left: 10%;
  font-size: 12px;
  color: #797979;
  font-family: "Microsoft Yahei", "Heiti SC", "Droid Sans", Arial;
}
